<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { HttpCodeEnum } from '@packages/share/enums'
import { Cpu, FullScreen, DocumentCopy } from '@element-plus/icons-vue'
import { getAsseInfoZcChAPI, getHistoryipAPI } from '@/api/search/index'
import { type AxiosResponse } from 'axios'
import { copyText } from '@/utils/copyTextToClipboard'
import HistoryLog from './compent/historyLog.vue'
import { assignObject } from '@/utils/object'
const props = defineProps({
  id: { type: String, required: true }
})
// 基础数据
const Ipinfo = reactive({
  port: [],
  protocol: [],
  banner: [],
  service: '',
  updateTime: '',
})
const getInfo = (id: string) => {
  getAsseInfoZcChAPI({ id: id }).then((res: AxiosResponse) => {
    let { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      assignObject(Ipinfo, data)
    }
  })
}
// 显示标题拼接
const portupdate = (data: any) => {
  const result = data.map(item => (
    {
      str1: item.port,
      str2: item.service
    }
  ));
  return result
}
// 全屏显示
const dialogVisible = ref(false)
const dialogContent = ref(false)
const openDialog = (value: any) => {
  dialogVisible.value = true
  dialogContent.value = value
}
// 正则
const modifyString = (data: string) => {
  return data
    .replace(/^["<br> \n\r]+|["\n\r]+$/g, '')
    .replace(/^\\n/g, '')
    .replace(/(?:\\r\\n|\\r|\\n)+/g, '<br>')
    .replace(/\\"|\\/g, '')
    .replace(/: <br> /g, ':')
  // .replace(/\s*<br\s*\/?>\s*/gi, '\n').trim() //textarea文本域识别\n
};
// 锚点跳转
const scrollToAnchor = (index:any) => {
  const element = document.getElementById(index);
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' });
  }
}
onMounted(() => {
  getInfo(props.id)
})
</script>
<template>
  <div>
    <!-- 开放端口 -->
    <div class="ports">
      <div class="title">端口/服务:</div>
      <jm-tag class="tags" type="primary" size="large" v-for="(item, index) in portupdate(Ipinfo.banner)" :key="index">
        <a @click="scrollToAnchor(index)">
          <span>{{ item.str1 + "/" + item.str2 }}</span>
        </a>
      </jm-tag>
    </div>
    <hr class="line" v-if="Ipinfo.banner?.length>0">
    <div v-if="Ipinfo.banner?.length===0">
      <jm-empty description="空" />
    </div>
    <!-- 端口详情 -->
    <div class="ports-infos" v-for="(item, index) in Ipinfo.banner" :key="index">
      <div class="portbox" :id="String(index)">
        <div class="port-left">
          <div class="Title"><span>{{ item.port + "/" + item.service }}</span></div>
          <div class="text"><span class="it-l">IP: </span><span class="it-r">{{ item.ip }}</span></div>
          <div class="text"><span class="it-l">端口：</span><span class="it-r">{{ item.port }}</span></div>
          <div class="text"><span class="it-l">协议：</span><span class="it-r">{{ item.protocol }}</span></div>

          <div class="text"><span class="it-l">服务：</span><span class="it-r">{{ item.service }}</span></div>
          <div class="text"><span class="it-l">设备：</span><span class="it-r">{{ item.equipment }}</span></div>
          <div class="text"><span class="it-l">应用：</span><span class="it-r">{{ item.app }}</span></div>

        </div>
        <div class="port-right">
          <!-- 固定标题部分 -->
          <div class="nav">
            <div>
              <span class="text">Banner</span>
            </div>
            <div>
              <!-- 全屏查看 -->
              <jm-icon class="icon" @click="openDialog(item.banner)">
                <FullScreen />
              </jm-icon>
              <!-- 复制 -->
              <jm-icon class="icon" @click.stop="copyText(item.banner)">
                <DocumentCopy />
              </jm-icon>
            </div>
          </div>
          <hr class="line">
          <!-- 滚动区域 -->
          <div class="scrollbox">
            <div v-html="modifyString(item.banner)"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- <hr class="line"> -->
    <!-- 历史变更 -->
    <div class="history">
      <HistoryLog :id="props.id" />
    </div>
    <!-- 全屏显示 -->
    <jm-dialog v-model="dialogVisible" :modal="true">
      <template #header>
        <p v-html="modifyString(dialogContent)"></p>
      </template>
    </jm-dialog>

  </div>
</template>

<style scoped lang="scss">
.line {
  border: 1px solid #e4e7ed;
  margin-bottom: 0.5rem;
}

.ports {
  .title{
    color:#66667a;
    font-weight: 600;
    margin-bottom: .5rem;
  }
  .tags {
    cursor: pointer;
    // margin-top: 0.625rem;
    margin-right: 1rem;
  }
}

.ports-infos {
  .portbox {
    margin: 1rem 0;
    display: flex;
    justify-content: space-between;

    .port-left {
      width: 25rem;

      .Title {
        color:#66667a;
        font-size: 1.5rem;
        font-weight: 700;
      }

      .text {
        margin: 0.4rem 0;

        .it-l {
          display: inline-block;
          width: 5rem;
          color: #888888;
          font-weight: 700;
        }

        .it-r {
          font-size: large;
          font-weight: 500;
          color: #9ca3be;
        }
      }
    }

    .port-right {
      border: solid #e4e7ed 1px;
      height: 12.25rem;
      margin-right: 0.1875rem;
      flex: 1;
      padding: 0.5rem;
      overflow: hidden;

      .nav {
        display: flex;
        // margin-bottom: 0.5rem;
        justify-content: space-between;
        font-size: 1rem;

        .text {
          color: #0d7cf2;
          font-weight: 500;
        }

        .icon {
          margin: 0 .3rem;
          cursor: pointer;
        }

        .icon:hover {
          // border:solid 1px #BBB;
          color: #0d7cf2;
        }

        img {}

        img:hover {
          border: solid 1px #BBB;
        }
      }


      .scrollbox {
        overflow: auto;
        height: calc(100% - 2.5rem);
        padding: 0 0.5rem;
        color:#656667;

        &::-webkit-scrollbar-track-piece {
          background-color: var(--el-fill-color-blank);
        }

        &::-webkit-scrollbar {
          width: 0.375rem;
          height: 0.375rem;
        }

        &::-webkit-scrollbar-thumb {
          border-radius: 1.25rem;
          background-color: var(--el-text-color-disabled);
        }
      }
    }

    .port-right:hover {
      box-shadow: 0.125rem 0.125rem 0.3125rem .1875rem rgba(0, 0, 0, 0.3);
    }
  }
}
</style>
